<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>话题页</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
		<link rel="stylesheet" href=" ../css/iconfont.css">

		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<style type="text/css">
			/* 卡片内容加边距 */
			.my-cont {
				padding: .2rem .75rem;
			}

			/* 单张照片 */
			.my-cont .c1 img {
				width: 100%;
			}

			/* 两张照片 */
			.my-cont .c2 img {
				width: 49%;
			}

			/* 三张照片及以上 */
			.my-cont .c3 img {
				width: 32%;
			}

			/* 背景色白色 */
			.page,
			.page-group {
				background-color: white;
			}


			/* 去掉卡片边距 */
			.card {
				margin: 0;
				box-shadow: 0 0 0 #000000;
				font-size: 0.7rem;
			}

			/* 用户字体 */
			.list-block .my-user {
				font-size: 0.6rem;
				color: rgb(150, 150, 150);
			}

			/* 头像圆角 */
			.my-photo img {
				border-radius: 1rem;
			}

			.list-block .media-list .item-title .username {
				font-size: 0.7rem;
				font-weight: 700;
			}

			#replyReply .username {
				font-size: 0.7rem;
				font-weight: 700;
			}

			/* 卡片主内容左右边距 */
			.my-data {
				position: static;
				/* border-bottom: 1px solid rgb(220, 220, 220); */
				padding-right: 60%;
				padding-left: 1rem;
			}

			#reply .my-data {
				position: static;
				/* border-bottom: 1px solid rgb(220, 220, 220); */
				padding-right: 40%;
				padding-left: 1rem;
			}

			/* 用户头像 */
			.user-photo img {
				width: 2rem;
				height: 2rem;
				border-radius: 1rem;
			}

			/*  */
			#forumIntr {
				width: 70%;
			}


			/* 添加话题入口 */
			#addTopic {
				position: fixed;
				bottom: 2rem;
				right: 1rem;
			}

			#addTopic span {
				font-size: 1.5rem;
			}

			/* popup遮罩异常 */
			/* .modal-overlay.modal-overlay-visible,
			.popup-overlay.modal-overlay-visible,
			.preloader-indicator-overlay.modal-overlay-visible {
				z-index: 300;
			} */

			/* 发送动态弹窗 */
			.popup-addTopic .content-block {
				margin-top: 0.2rem;
			}
			
			/* 顶部高度 */
			.addTopic-top>div {
				height: 2rem;
				line-height: 2rem;
				font-size: 0.8rem;
				text-align: center;
				color: #000000;
			}
			.addTopic-top .t1 {
				text-align: left;
			}

			.addTopic-top .t3 {
				text-align: right;
				color: rgb(0, 149, 255);
			}
			/* 举报窗口顶部高度 */
			
			.inform-top>div {
				height: 2rem;
				line-height: 2rem;
				font-size: 0.8rem;
				text-align: center;
				color: #000000;
			}
			.inform-top .t1{
				text-align: left;
			}
			/* 文本顶部高度 */
			#addTopic-count {
				margin-top: 0rem;
			}

			/* 文本域 */
			#addTopic-count textarea {
				height: 6rem;
			}

			/* 图片 */
			.userImg {
				position: relative;
			}

			.userImg img {
				width: 100%;
				height: 100%;
			}

			.imgDel {
				position: absolute;
				top: 0.2rem;
				right: 0.32rem;
				font-size: 0.8rem;
			}

			/* 图片添加 */
			#addImg {
				position: absolute;
				opacity: 0;
				width: 100%;
				height: 100%;
			}

			/* 主内容顶部距离 */
			.page .content {
				top: 0rem;
			}

			.list-block {
				margin: 0rem 0;
			}

			/* 社区照片 */
			#forumImg {
				height: 1.5rem;
				width: 1.5rem;
				margin-left: 0.2rem;
				float: left;
			}

			#forumImg img {
				height: 1.2rem;
				width: 1.2rem;
				border-radius: 0.6rem;
				margin-top: 0.15rem;
			}

			#forumName {
				height: 1.5rem;
				margin-left: 0.3rem;
				float: left;
			}

			/* 话题底部间距调整 */
			.forum-data {
				position: static;
				padding: 0 8%;
				padding-bottom: 0.5rem;
				text-align: center;
				box-shadow: 1px 1px 1px rgb(200, 200, 200);
			}

			#reply .my-cont,
			#reply .my-data {
				margin-left: 2.5rem;
			}

			#replys .my-cont,
			#replys .my-data {
				margin-left: 2.5rem;
			}

			/* 等级图标 */
			#expIco {
				font-size: 0.7rem;
				position: relative;
				bottom: 0.2rem;
				left: 0.1rem;
			}

			/* 图标溢出被遮挡处理 */
			.list-block .item-title {
				overflow: visible;
			}

			.icon-level-1,
			.icon-level-2,
			.icon-level-3 {
				color: rgb(106, 210, 176);
			}

			.icon-level-4,
			.icon-level-5,
			.icon-level-6 {
				color: rgb(103, 160, 240);
			}

			.icon-level-7,
			.icon-level-8,
			.icon-level-9 {
				color: rgb(242, 179, 40);
			}

			/* 赞，回复数字 */
			.numType {
				font-size: 0.7rem;
				padding-right: 0.2rem;
				position: relative;
				top: 0.1rem;
			}

			/* 楼层回复弹窗 */
			.popup-lookTopic .list-block ul:after {
				content: none;
			}

			.popup-lookTopic .list-block ul:before {
				content: none;
			}

			#replyReply>.my-cont {
				border-bottom: 1px solid rgb(200, 200, 200);
			}

			#replyReply .my-cont {
				font-size: 0.7rem;
			}

			#replys .my-cont {
				padding-left: 0;
			}

			#replyReply li {
				padding-left: 0;
			}

			/* 显示回复数字间距 */
			.popup-lookTopic #topicNum {
				margin: 0.2rem;
			}

			/* @图标 */
			.repName {
				font-size: 0.65rem;
				color: rgb(8, 148, 236);
			}

			/* 点赞回复图标div属性 */
			.userUtil {
				width: 30%;
				text-align: center;
			}
			/* 顶部文字 */
			#replyReply  .t2{
				position: absolute;
				width: 60%;
				left: 20%;
				line-height: 1.8rem;
				text-align: center;
				font-size: 0.7rem;
			}
			/* 弹窗样式修改 */
			.popup-lookTopic{
				top: 3rem;
				border-radius: 1rem;
			}
			#replyReply{
				margin-bottom: 6rem;
				margin-top: 0;
			}
			/* 回复的回复弹窗无法定位，取消动画时间 */
			.popup-lookTopic .login-screen.modal-in, .popup.modal-in{
				-webkit-transform:none;
				transform:none;
			}
			/* 顶部定位 */
			#lookTopic-top{
				position: fixed;
				width: 100%;
				border-radius: 1rem;
				height: 1.8rem;
				z-index: 23000;
				background-color: white
				/* line-height:1.8rem; */
			}
			#lookTopic-top .t1 span{
				line-height: 1.8rem;
				font-size: 0.8rem;
			}
			#floor{
				margin-top: 2rem;
			}
			/* 底部定位 */
			#lookTopic-botm{
				position: fixed;
				bottom: 0;
				width: 100%;
				background-color: white;
				padding-top: 0.1rem;
				height: 1.8rem;
			}
		</style>
		<style type="text/css">
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div id="page">
			<div id="bottom">
			<div class="page">
				<header class="bar bar-nav row" style="height: 1.5rem;line-height: 1.5rem;">
					<div @click="returns" id="return" class="col-33">
						<a href="#">
							<span class="iconfont icon-fanhui"></span>
						</a>
					</div>
					<div class="col-33" style="font-size: 0.6rem;">
						<div id="forumImg">
							<img v-if="topicMes!=null" :src="imgSrc(topicMes.forum.photo)">
						</div>
						<div id="forumName" v-if="topicMes!=null">
							{{topicMes.forum.name}}
						</div>
					</div>
				</header>

				<!-- 这里是页面内容区 -->
				<div class="content">

					<!-- 主内容 -->
					<div class="active infinite-scroll" data-distance="50">
						<div class="list-block">
							<div class="card list-container">
								<!-- 题主 -->
								<div style="padding-top:2rem;">
									<!-- 话题信息 -->
									<div class="card-content">
										<div class="list-block media-list">
											<ul>
												<li class="item-content">
													<div class="item-media my-photo" v-if="topicMes!=null">
														<a :href="userHtml(topicMes.user.id)">
														<img :src="imgSrc(topicMes.user.photo)" width="35" height="35">
														</a>
													</div>
													<div class="item-inner">
														<div class="item-title-row">
															<div v-if="topicMes!=null" class="item-title">
																<span class="username">{{topicMes.user.nickname}}</span>
																<span v-if="topicMes.exp!=0" id="expIco" :class="ico(topicMes.exp)"></span>
															</div>
														</div>
														<div v-if="topicMes!=null" class="item-subtitle my-user">
															{{timeCount(topicMes.topic.date)}}
														</div>
													</div>
												</li>
											</ul>
										</div>
									</div>
									<!-- 话题内容 -->
									<div class="my-cont">
										<div style="margin-bottom: 0.5rem;">
											<span v-if="topicMes!=null">
												{{topicMes.topic.content}}
											</span>
										</div>
										<!-- 照片 -->
										<div v-if="topicMes!=null&&topicMes.imgs!=null&&topicMes.imgs.length>0">
											<span class="c1" v-for="item in topicMes.imgs">
												<img @click="changePhoto(topicMes.topic.id)" class=" pb-popup" :src="imgSrc(item.photo)">
											</span>
										</div>
									</div>
									<div class="card-footer forum-data">
										<span v-if="topicMes!=null">
											<span onclick="alterTopicPraise(this)" v-if="topicMes.praiseStatus!=0" class="icon iconfont icon-appreciate_fill_light"></span>
											<span onclick="alterTopicPraise(this)" v-if="topicMes.praiseStatus==0" class="icon iconfont icon-appreciate"></span>
											<br>
											<span>{{topicMes.topicPraiseNum}}</span>
										</span>
										<span v-if="topicMes!=null">
											<span data-popup=".popup-addTopic" class="open-popup icon iconfont icon-message"></span>
											<br>{{topicMes.replyNum}}
										</span>
										<span v-if="topicMes!=null">
											<span onclick="alterCollect(this)" v-if="topicMes.collectStatus==1" class="icon iconfont icon-icon-test1"></span>
											<span onclick="alterCollect(this)" v-if="topicMes.collectStatus==0" class="icon iconfont icon-icon_star"></span>
											<br>
											<span>{{topicMes.collertNum}}</span>
										</span>
										<span>
											<span @click="informMes(topicMes.user.nickname,'null')" class="create-actions icon iconfont icon-more_light"></span>
										</span>
									</div>
								</div>

								<!-- 回复 -->
								<div id="reply">

									<!-- 用户回复 -->
									<!-- <div class="card-content">
										<div class="list-block media-list">
											<ul>
												<li class="item-content">
													<div class="item-media my-photo">
														<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
														 width="35">
													</div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">张三
															<span id="expIco" class="iconfont icon-level-4"></span>
															</div>
														</div>
														<div class="item-subtitle my-user">
															12：50
														</div>
													</div>
												</li>
											</ul>
										</div>
									</div>
									!-- 内容 --
									<div class="my-cont">
										<div style="margin-bottom: 0.5rem;">
											<span>
												安达市大所大所多安达市大所大所多安达市安达市大所大所多安达市大所大所多安达市大所大所多安达市大所大所多<br>
											</span>
										</div>
										<span class="c1">
											<img src="http://localhost:12317/img/joylife/10.jpg">
										</span>
									</div>
									<div class="card-footer my-data">
										<span>5
											<span class="icon iconfont icon-appreciate"></span>
										</span>
										<span>5
											<span class="icon iconfont icon-message"></span>
										</span>
										<span>
											<span class="icon iconfont icon-more_light"></span>
										</span>
									</div> -->


								</div>
							</div>
						</div>
						<!-- 加载提示符 -->
						<div class="infinite-scroll-preloader">
							<div class="preloader"></div>
						</div>
					</div>
				</div>
				<div id="addTopic" class="open-popup" data-popup=".popup-addTopic">
					<span class="iconfont icon-jia"></span>
				</div>
				
				</div>
			</div>
			
			<!-- About Popup -->
			<!-- 发布消息 -->
			<div class="popup popup-addTopic">
				<div class="content-block">
					<!-- 工具栏 -->
					<div class="addTopic-top row">
						<div class="t1 col-33">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span>回复</span>
						</div>
						<div @click="addTopic" class="t3 col-33">
							<span>发布</span>
						</div>
					</div>
					<!-- 输入区域 -->
					<div id="addTopic-count" class="item-content list-block">
						<textarea id="replyContent" name="replyContent" maxlength="10000" required placeholder="尽情发挥吧..."></textarea>
					</div>
					<!-- 图片 -->
					<div id="addTopic-img" class="row">
						<div v-for="(item,index) in imgs" class="userImg col-33">
							<span @click="delImg(index)" class="imgDel iconfont icon-shanchu"></span>
							<img :src="imgSrc(item)">
						</div>
						<div v-if="imgs.length<3" class="userImg col-33">
							<!--  -->
							<form id="imgForm" method="post" enctype="multipart/form-data">
								<input type="file" @change="addImgMethod" id="addImg" name="img" accept="image/jpeg" />
							</form>
							<img src="../img/iconfont-tianjia.png">
						</div>
					</div>
				</div>
			</div>
			
			<!-- 举报窗口 -->
			<div class="popup popup-inform">
				<div class="content-block" style="margin-top: 0.5rem;">
					<!-- 工具栏 -->
					<div class="inform-top row">
						<div class="t1 col-33">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span id="informName">举报***</span>
						</div>
					</div>
					<!-- 输入区域 -->
					<div id="report-count" class="item-content list-block">
						<textarea id="informContent" name="informContent" maxlength="190" required placeholder="举报原因..." style="height: 8rem;"></textarea>
					</div>
					 <p><a onclick="addInform()" href="#" class="button button-big button-round">举报</a></p>
				</div>
			</div>
			
			<!-- 楼层回复 -->
			<div class="popup popup-lookTopic">
				<div id="replyReply" class="content-block" >
					<!-- !-- 台头 --
					<div id="lookTopic-top" class="row">
						<div class="t1 col-40">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-40">
							某人的回复
						</div>
					</div>
					!-- 楼层信息 --
					<div class="card-content">
						<div class="list-block media-list">
							<ul>
								<li class="item-content">
									<div class="item-media my-photo">
										<img src="'+serviceIP+'/forum/img/joylife/1.jpg" width="35">
									</div>
									<div class="item-inner">
										<div class="item-title-row">
											<div class="item-title">
												<span class="username">
													流水芳华
												</span>
												<span id="expIco" class="iconfont icon-level-5"></span>
											</div>
										</div>
										<div class="item-subtitle my-user">
											2020-04-28
										</div>
									</div>
			
									<div class="userUtil">
										<span>
											<span class="icon iconfont icon-message" style="margin-left: 0.6rem;"></span>
										</span>
									</div>
								</li>
							</ul>
						</div>
			
						<div class="my-cont">
							<div style="margin-bottom: 0.5rem;">
								<span>
									今天天气真好
								</span>
							</div>
							<div>
								<span class="c1">
									<img src="'+serviceIP+'/forum/img/joylife/10.jpg">
								</span>
							</div>
						</div>
						!-- 回复信息 --
						<div id="topicNum">
							<span>50</span>条回复
						</div>
					</div> -->
					<!-- <div id="replys">
			
			
						<div class="card-content">
							<div class="list-block media-list">
								<ul>
									<li class="item-content">
										<div class="item-media my-photo">
											<img src="'+serviceIP+'/forum/img/joylife/1.jpg" width="34">
										</div>
										<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">
													<span class="username">流水芳华</span>
													<span id="expIco" class="iconfont icon-level-5"></span>
												</div>
											</div>
											<div class="item-subtitle my-user">
												2020-04-30
											</div>
										</div>
										<div class="userUtil">
											<span>
												<span class="numType">0</span>
												<span onclick="alterTopicPraise(this)" class="icon iconfont icon-appreciate_fill_light"></span>
											</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="my-cont">
							<div style="margin-bottom: 0.5rem;">
								<span class="repName">@王五</span>
								<span>说的好，赞一个</span>
							</div>
						</div>
			
						<div class="card-content">
							<div class="list-block media-list">
								<ul>
									<li class="item-content">
										<div class="item-media my-photo">
											<img src="'+serviceIP+'/forum/img/joylife/1.jpg" width="34">
										</div>
										<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">
													<span class="username">流水芳华</span>
													<span id="expIco" class="iconfont icon-level-5"></span>
												</div>
											</div>
											<div class="item-subtitle my-user">
												2020-04-30
											</div>
										</div>
										<div class="userUtil">
											<span>
												<span class="numType">0</span>
												<span onclick="alterTopicPraise(this)" class="icon iconfont icon-appreciate_fill_light"></span>
											</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="my-cont">
							<div style="margin-bottom: 0.5rem;">
								<span class="repName">@王五</span>
								<span>说的好，赞一个</span>
							</div>
						</div>
			
			
					</div> -->
				</div>
			</div>
		</div>

		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/config.js"></script>
		<script type="text/javascript">
			//所有图片数据
			var allPhoto={};
			//当下图片浏览器数据
			var newphotos=new Array();
			$(function(){
			   $(document).on('click','.pb-popup',function () {
				 var myPhotoBrowserPopup = $.photoBrowser({
					   photos :newphotos,
					   type: 'popup'
				});
				myPhotoBrowserPopup.open();
			   });
			})
		</script>
		<script type="text/javascript">
			/* 举报 */
			var informName="";
			var informId="";
			/* 获取举报对象 */
			function informMes(targetName,targetId){
				informName=targetName;
				informId=targetId;
				$("#informName").html("举报"+informName);
			}
			/* 举报弹窗 */
			$(document).on('click','.create-actions', function () {
			      var buttons1 = [
			        {
			          text: '请选择',
			          label: true
			        },
			       {
			          text: '举报',
			          bold: true,
			         color: 'danger',
			          onClick: function() {
			            /* $.alert("你举报了"+reportName+reportId); */
						$.popup(".popup-inform");
			          }
			        },
			        {
			          text: '取消',
					  color: 'red'
			        }
			      ];
			      var groups = [buttons1];
			      $.actions(groups);
			  });
			  /* 提交举报*/
			function addInform(){
				var content=$("#informContent").val();
				if(content.length<5){
					$.toast("举报内容太短了！");
				}else{
					/* console.log(content);
					console.log(topicId);
					console.log(informId); */
			$.ajax({
				type: 'get',
				url: serviceIP+"/forum/addInform",
				dataType: 'json',
					data:{
						content: content,
						topicId:topicId,
						floorId:informId
					},
				headers: {
						"token":token,
						"refreshtoken":refreshtoken
					},
				success:function (data) {
							if (data.data == 1) {
								$.toast("已举报");
								//刷新回复列表
								$("#informContent").val("");
								$.closeModal(".popup-inform");
							} else {
								$.toast("失败，系统维护中");
							}
						}});
				}
			}
		</script>
		<script>
			/* 获取请求参数 */
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if (r != null) return unescape(r[2]);
				return null; //返回参数值
			}
			var topicId = getUrlParam('topicId');
			//绑定vue
			var app = new Vue({
				el: "#page",
				data: {
					topicMes: null,
					imgs: []
				},
				created() {
					axios.get(serviceIP+"/forum/lookTopic?topicId=" + topicId,{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
						this.topicMes = result.data;
						//保存图片
						if(result.data.imgs!=null&&result.data.imgs.length!=0){
							var tempPhoto=new Array();
							$.each(result.data.imgs, function(i, item) {
								tempPhoto.push(item.photo);
							}); 
							//保存
							allPhoto[result.data.topic.id]=tempPhoto;
						}
					});
				},
				methods: {
					/* 头像 */
					imgSrc: function(src) {
						return src;
					},
					/* 跳转用户界面 */
					userHtml:function(id){
						return "forum-other-centre.html?userId="+id;
					},
					/* 切换照片数组 */
					changePhoto:function(id){
						return changePhoto(id);
					},
					/* 添加照片 */
					addImgMethod: function() {
						var that = this;
						$.ajax({
							url: serviceIP+"/forum/addImg",
							type: "post",
							dataType: "json",
							cache: false,
							data: new FormData($("#imgForm")[0]),
							headers: {
										"token":token,
										"refreshtoken":refreshtoken
									},
							processData: false, // 不处理数据
							contentType: false, // 不设置内容类型
							success: function(data) {
								that.imgs.unshift(data.url);
							}
						});
					},
					//发表时间计算
					timeCount: function(time) {
						return timeCount(time);
					},
					/* 发送回复 */
					addTopic: function() {
						var text = $("#replyContent").val();
						if (text.length < 5) {
							$.toast("内容太短了！");
						} else {
							var userImgs = this.imgs;
							var that = this;
							$.ajax({
								type: 'get',
								url: serviceIP+"/forum/addReply",
								dataType: 'json',
									data:{
										content: text,
										imgs: userImgs,
										topicId: topicId
									},
								headers: {
										"token":token,
										"refreshtoken":refreshtoken
									},
								success:function (data) {
									if (data.data != 0) {
										if (data.data == 1) {
											$.toast("回复成功，经验+3");
										} else {
											$.toast("回复成功");
										}
										$("#replyContent").val("");
										that.imgs = [];
										that.topicMes.replyNum++;
										//重新加载
										lastIndex = 1;
										$('#reply').html("");
										$.attachInfiniteScroll($('.infinite-scroll'));
										aja();
										//关闭弹窗
										$.closeModal('.popup-addTopic');
									} else {
										$.toast("失败，系统维护中");
									}
								}});
						}
					},
					/* 经验对应图标等级判断 */
					ico: function(exp) {
						//调用经验判断方法
						return ico(exp);
					},
					//返回
					returns: function() {
						window.history.go(-1);
						//location.href = "forum-index.html";
					},
					//图片删除
					delImg: function(index) {
						this.imgs.splice(index, 1);
					},
					//举报
					informMes:function(targetName,targetId) {
						informName=targetName;
						informId=targetId;
						$("#informName").html("举报"+informName);
					}
				}
			});
		</script>
		<!-- 封装的工具代码 -->
		<script>
			/* 切换照片数组 */
			function changePhoto(id){
				newphotos=allPhoto[id];
				//console.log(newphotos);
			}
			/* 用户经验图标 */
			function ico(exp) {
				if (exp <= 15) {
					return "iconfont icon-level-1";
				} else if (exp <= 50) {
					return "iconfont icon-level-2";
				} else if (exp <= 100) {
					return "iconfont icon-level-3";
				} else if (exp <= 300) {
					return "iconfont icon-level-4";
				} else if (exp <= 600) {
					return "iconfont icon-level-5";
				} else if (exp <= 1200) {
					return "iconfont icon-level-6";
				} else if (exp <= 2500) {
					return "iconfont icon-level-7";
				} else if (exp <= 5000) {
					return "iconfont icon-level-8";
				} else {
					return "iconfont icon-level-9";
				}
			}
			/* 发送时间计算 */
			function timeCount(time) {
				var num = new Date().getTime() - Date.parse(time);
				var date = new Date(Date.parse(time));
				//一小时以内
				if (num < 3600000) {
					return Math.ceil(num / 60000) + '分钟前';
				} else if (date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)) {
					//今天发送的
					return time.substring(11, 16);
				} else {
					//之前的信息
					return time.substring(0, 10);
				}
			}
			//回复赞状态更改
			function alterPraise(that, replyId) {
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/alterPraise",
					dataType: 'json',
						data:{
							replyId: replyId
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if (data.status == 1) {
							$(that).prev().html($(that).prev().html() * 1 + 1 * 1);
							$(that).attr("class", "icon iconfont icon-appreciate_fill_light");
							$.toast("已赞！");
						} else if (data.status == 0) {
							$(that).prev().html($(that).prev().html() * 1 - 1 * 1);
							$(that).attr("class", "icon iconfont icon-appreciate");
							$.toast("取消赞！");
						}
					}});
			}
			//话题赞状态更改
			function alterTopicPraise(that) {
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/alterTopicPraise",
					dataType: 'json',
						data:{
							topicId: topicId
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if (data.status == 1) {
							$(that).next().next().html($(that).next().next().html() * 1 + 1 * 1);
							$(that).attr("class", "icon iconfont icon-appreciate_fill_light");
							$.toast("已赞！");
						} else if (data.status == 0) {
							$(that).next().next().html($(that).next().next().html() * 1 - 1 * 1);
							$(that).attr("class", "icon iconfont icon-appreciate");
							$.toast("取消赞！");
						}
					}});
			}
			//回复页面的回复
			function replyReply(replyName,replyId){
				//console.log(replyName+replyId);
				//修改输入框提示
				if(replyName!=null){
					$("#lookTopic-search").attr("placeholder","@"+replyName+":");
				}else{
					$("#lookTopic-search").attr("placeholder","内容...");
				}
				//修改隐藏窗口id
				$("#lookTopic-replyId").val(replyId);
			}
			//失去焦点判断
			function loseFocus(){
				if($("#lookTopic-search").val()==""){
					//重新指定回复层主
					$("#lookTopic-search").attr("placeholder","内容...");
					$("#lookTopic-replyId").val($("#lookTopic-replyId2").val());
				}
			}
			//发送回复的回复
			function addReplyReply(){
				var content=$("#lookTopic-search").val();
				var replyUserId=$("#lookTopic-replyId").val();
				var floorId=$("#lookTopic-replyId").attr("floorId");
				if(content.length<5){
					$.toast("内容太短了！");
				}else{
					//console.log(cont+replyId+floorId);
					//发送请求添加回复
					$.ajax({
						type: 'get',
						url: serviceIP+"/forum/addReplyReply",
						dataType: 'json',
							data:{
								content: content,
								replyUserId:replyUserId,
								topicId:topicId,
								floorId:floorId
							},
						headers: {
								"token":token,
								"refreshtoken":refreshtoken
							},
						success:function (data) {
							if (data.data != 0) {
								if (data.data == 1) {
									$.toast("回复成功，经验+3");
								} else {
									$.toast("回复成功");
								}
								//刷新回复列表
								$("#replyReply").html("");
								openReply(floorId);
								
							} else {
								$.toast("失败，系统维护中");
							}
						}});
				}
			}
			//话题收藏状态更改
			function alterCollect(that) {
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/collectTopic",
					dataType: 'json',
						data:{
							topicId: topicId
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if (data.status == 1) {
							$(that).next().next().html($(that).next().next().html() * 1 + 1 * 1);
							$(that).attr("class", "icon iconfont icon-icon-test1");
							$.toast("已收藏！");
						} else if (data.status == 0) {
							$(that).next().next().html($(that).next().next().html() * 1 - 1 * 1);
							$(that).attr("class", "icon iconfont icon-icon_star");
							$.toast("取消收藏！");
						}
					}});
			}
			//拼回复的回复弹窗信息
			function openReply(replyId) {
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/replyMes",
					dataType: 'json',
						data:{
							replyId: replyId
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						/* 痛苦的拼标签历程，远离编码，热爱生命 */
						//console.log(data);

						<!-- 台头 -->
						var html='<div id="lookTopic-top" class="row">'
							+'<div class="t1 col-20">'
					+'			<span class="close-popup iconfont icon-fanhui"></span>'
					+'		</div>'
					+'		<div class="t2">'
					+			data.floorUser.centerUser.nickname+'的回复'
					+'		</div>'
					+'	</div>'
						<!-- 楼层信息 -->
					+'	<div style="height:1.5rem;"></div><div class="card-content">'
					+'		<div class="list-block media-list">'
					+'			<ul>'
					+'				<li class="item-content">'
					+'					<div class="item-media my-photo">'
					+'<a href="forum-other-centre.html?userId='+data.floorUser.centerUser.id+'"><img src="'+data.floorUser.centerUser.photo+'" width="35" height="35"></a>'
					+'					</div>'
					+'					<div class="item-inner">'
					+'						<div class="item-title-row">'
					+'							<div class="item-title">'
					+'								<span class="username">'
					+									data.floorUser.centerUser.nickname
					+'								</span>'
					+'								<span id="expIco" class="'+ico(data.floorUser.exp)+'"></span>'
					+'							</div>'
					+'						</div>'
					+'						<div class="item-subtitle my-user">'
					+							timeCount(data.floorUser.forumReply.date)
					+'						</div>'
					+'					</div>'
					+'					<label for="lookTopic-search"><div class="userUtil">'
					+'						<span onclick="replyReply(null,\''+data.floorUser.centerUser.id+'\')">'
					+'							<span class="icon iconfont icon-message" style="margin-left: 0.6rem;"></span>'
					+'						</span>'
					+'					</div></label>'
					+'				</li>'
					+'			</ul>'
					+'		</div>'
						
					+'		<div class="my-cont">'
					+'			<div style="margin-bottom: 0.5rem;">'
					+'				<span>'
					+					data.floorUser.forumReply.content
					+'				</span>'
					+'			</div>'
					+'			<div>';
					//照片
								if (data.floorUser.forumPhotos != null && data.floorUser.forumPhotos.length > 0) {
									html += '<span class="c1">';
									for (var index = 0; index < data.floorUser.forumPhotos.length; index++) {
										html += '<img src="'+ data.floorUser.forumPhotos[index].photo + '">';
									}
									html += '</span>';
								}
					html +='			</div>'
					+'		</div>'
							<!-- 回复信息 -->
					+'		<div id="topicNum">'
					+'			<span>'+data.replyReply.length+'</span>条回复'
					+'		</div>'
					+'	</div>';
					
					//拼回复标签
					

					if (data.replyReply != null && data.replyReply.length > 0) {
						html +='<div id="replys">';
						for(var index = 0; index < data.replyReply.length; index++){
							html +='<div class="card-content">'
							+'	<div class="list-block media-list">'
							+'		<ul>'
							+'			<li class="item-content">'
							+'				<div class="item-media my-photo">'
							+'<a href="forum-other-centre.html?userId='+data.replyReply[index].user.id+'"><img src="'+data.replyReply[index].user.photo+'" style="width: 1.75rem;height: 1.75rem;"></a>'
							+'				</div>'
							+'				<div class="item-inner">'
							+'					<div class="item-title-row">'
							+'						<div class="item-title">'
							+'							<span class="username">'+data.replyReply[index].user.nickname+'</span>';
									if(data.replyReply[index].exp!=0){
										html+='<span id="expIco" class="'+ico(data.replyReply[index].exp)+'"></span>';
									}
							html+='						</div>'
							+'					</div>'
							+'					<div class="item-subtitle my-user">'
							+						timeCount(data.replyReply[index].replyReply.date)
							+'					</div>'
							+'				</div>'
							+'				<div class="userUtil">'
							+'					<span>'
							+'						<span class="numType">'+data.replyReply[index].replyPraiseNum+'</span>';
							if(data.replyReply[index].praiseStatus==1){
								html+='<span onclick="alterPraise(this,\''+data.replyReply[index].replyReply.id+'\')" class="icon iconfont icon-appreciate_fill_light"></span>';
							}else{
								html+='<span onclick="alterPraise(this,\''+data.replyReply[index].replyReply.id+'\')" class="icon iconfont icon-appreciate"></span>';
							}
							
							html+='					</span>'
							+'				</div>'
							+'			</li>'
							+'		</ul>'
							+'	</div>'
							+'</div>'
							+'<div class="my-cont">'
							+'	<div style="margin-bottom: 0.5rem;">'
							+'		<span class="repName">@'+data.replyReply[index].receptionUser.nickname+'</span>'
							+'<label for="lookTopic-search"><span onclick="replyReply(\''+data.replyReply[index].user.nickname+'\',\''+data.replyReply[index].user.id+'\')">'+data.replyReply[index].replyReply.content+'</span></label>'
							+'	</div>'
							+'</div>';
						}
						html +='</div>';
					}
						//底部输入栏
						html +='<div id="lookTopic-botm" class="searchbar row">'
									+'<div class="search-input col-75">'
										+'<input onBlur="loseFocus()" type="search" id="lookTopic-search" placeholder="内容..." />'
										+'<input type="hidden" floorId="'+data.floorUser.forumReply.id+'" id="lookTopic-replyId" value="'+data.floorUser.centerUser.id+'"/>'
										+'<input type="hidden" id="lookTopic-replyId2" value="'+data.floorUser.centerUser.id+'"/>'
									+'</div>'
									+'<a onclick="addReplyReply()" class="button button-fill button-primary col-20">回复</a>'
								+'</div>';
					
					$("#replyReply").html(html);
					}});

				$.popup(".popup-lookTopic");
			}
		</script>
		<!-- 追加消息的代码 -->
		<script>
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 100;
			// 每次加载添加多少条目
			var itemsPerLoad = 5;
			// 初始页
			var lastIndex = 1;
			//查找
			var find = "";
			//当前位置
			var site = 1;
			// 生成新条目的HTML
			function addItems(reply) {
				var html = '<div class="card-content">' +
					'<div class="list-block media-list">' +
					'<ul>' +
					'<li class="item-content">' +
					'<div class="item-media my-photo">' +
					'<a href="forum-other-centre.html?userId='+reply.centerUser.id+'"><img src="' + reply.centerUser.photo + '"  style="width: 1.75rem;height: 1.75rem;"></a>' +
					'</div>' +
					'<div class="item-inner">' +
					'	<div class="item-title-row">' +
					'	<div class="item-title"><span class="username">' + reply.centerUser.nickname + '</span>';
				//判断经验
				if (reply.exp != 0) {
					html += '<span id="expIco" class="' + ico(reply.exp) + '"></span>';
				}
				html += '</div>' +
					'</div>' +
					'<div class="item-subtitle my-user">';

				html += timeCount(reply.forumReply.date);

				html += '</div>' +
					'</div>' +
					'</li>' +
					'</ul>' +
					'</div>' +
					'</div>' +
					'<div class="my-cont">' +
					'<div style="margin-bottom: 0.5rem;">' +
					'<span>' +
					reply.forumReply.content + '<br>' +
					'</span>' +
					'</div>';
					//照片html
				if (reply.forumPhotos != null && reply.forumPhotos.length > 0) {
					html += '<span class="c1">';
					for (var index = 0; index < reply.forumPhotos.length; index++) {
						html += '<img class=" pb-popup" onclick="changePhoto(\''+reply.forumReply.id+'\')" src="'+ reply.forumPhotos[index].photo + '">';
					}
					html += '</span>';
					
					//保存图片
					var tempPhoto=new Array();
					$.each(reply.forumPhotos, function(i, item) {
						tempPhoto.push(item.photo);
					}); 
					//保存
					allPhoto[reply.forumReply.id]=tempPhoto;
				}
				
				html += '</div>' +
					'<div class="card-footer my-data">' +
					'<span><span class="numType">' + reply.replyPraiseNum +
					'</span><span onclick="alterPraise(this,\'' + reply.forumReply.id +
					'\')" class="icon iconfont ';
				/* 判断点赞状态 */
				if (reply.praiseStatus == 0) {
					html += 'icon-appreciate';
				} else {
					html += 'icon-appreciate_fill_light';
				}

				html += '"></span>' +
					'</span>' +
					'<span><span class="numType">' + reply.replyNum +
					'</span><span onclick="openReply(\'' + reply.forumReply.id + '\')" class="icon iconfont icon-message"></span>' +
					'</span>' +
					'<span>' +
					'<span onclick="informMes(\''+reply.centerUser.nickname+'\',\''+reply.forumReply.id+'\')" class="create-actions icon iconfont icon-more_light"></span>' +
					'</span>' +
					'</div>';

				// 添加新条目
				$('#reply').append(html);
			}
			//异步请求封装
			function aja() {
				// 如果正在加载，则退出
				if (loading) return;
				// 设置flag
				loading = true;
				//请求加载信息
			$.ajax({
				type: 'get',
				url: serviceIP+"/forum/lookReply",
				dataType: 'json',
					data:{
						page: lastIndex,
						limit: itemsPerLoad,
						topicId: topicId
					},
				headers: {
						"token":token,
						"refreshtoken":refreshtoken
					},
				success:function (data) {
						// 重置加载flag
						loading = false;
						//页面遍历添加
						$.each(data.data.list, function(i, item) {
							addItems(item);
						});
						// 更新最后加载的序号
						lastIndex++;
						//无数据
						if (data.data.size < itemsPerLoad) {
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
						}
						if (data.data.size < 1) {
							// 加载完毕，则注销无限加载事件，以防不必要的加载
							$.detachInfiniteScroll($('.infinite-scroll'));
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
							//提醒
							$.toast("没更多消息了，看看别的吧！");
							return;
						}
						//容器发生改变,如果是js滚动，需要刷新滚动
						$.refreshScroller();
					}
				});
			}
			// 注册'infinite'事件处理函数
			$(document).on('infinite', function() {
				aja();
			});
			aja();
		</script>
		<script>
			$.init();
		</script>
	</body>

</html>
